<template>
	<div v-for="(v, index) in material.list" :key="index">
		{{ v.a }} : {{ v.b }}
		<!-- <materialItem :value="v" @update:value="e => Object.assign(v, e)"></materialItem> -->
		<!-- <materialItem v-model:value="material.list[index]"></materialItem> -->
		<materialItem v-model="material.list[index]" @change="onChange(v)"></materialItem>
	</div>
</template>
<script>
import materialItem from './materialItem.vue';
export default {
	components: {
		materialItem
	},
	name: 'Material',
	data() {
		return {
			//material组件 任何改变数据的操作写在component里面，任何与外部沟通的方式写在component里面，component可以维护自己的数据
			material: {
				//当前tab
				currentTab: 0,
				//tabs组件
				tabs: [],
				//list组件
				list: [
					{
						a: 1,
						b: 2
					},
					{
						a: 3,
						b: 4
					}
				]
			}
		}
	},
	methods: {
		onChange(e) {
			console.log(`修改了`, e);
		},
	}
}
</script>
<style lang="scss" scoped></style>